{% if isFramework("angular") %}
```js
// define Cell Component to be reused
@Component({
    selector: 'colour-cell',
    template: `<span [style.colour]="params.color">{{params.value}}</span>`
})
class ColourCellComp implements ICellRendererAngularComp {
    params!: ICellRendererParams;

    agInit(params: ICellRendererParams) {
        this.params = params;
    }

    refresh(params: ICellRendererParams) {
        this.params = params;
        // As we have updated the params we return true to let AG Grid know we have handled the refresh.
        // So AG Grid will not recreate the cell renderer from scratch.
        return true;
    }
}

@Component({
    selector: 'my-app',
    template: `
        <ag-grid-angular
                [columnDefs]="columnDefs"
                ...other properties />`
})
export class AppComponent {
    columnDefs = [
        {
            headerName: "Colour 1",
            field: "value",
            cellRenderer: ColourCellComp,
            cellRendererParams: {
                color: 'guinnessBlack'
            }
        },
        {
            headerName: "Colour 2",
            field: "value",
            cellRenderer: ColourCellComp,
            cellRendererParams: {
                color: 'irishGreen'
            }
        }
    ];

    //...
}

```
{% /if %}
